<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="../static/plugins/layui/css/layui.css">
</head>
<style>
    .ok-body {
        padding: 10px
    }
</style>

<body>
<div class="ok-body">

    <blockquote class="layui-elem-quote layui-text">
        零件信息管理
    </blockquote>

    <form class="layui-form layui-form-pane" action="">

        <div class="layui-form-item">
            <div class="layui-inline">
                <input type="hidden" name="id" id="id" th:value="${id}">
                <label class="layui-form-label">物料编号</label>
                <div class="layui-input-inline">
                    <input type="text" name="number" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">零件名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">必填</div>
            </div>

        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">单位</label>
                <div class="layui-input-inline">
                    <input type="text" name="unit" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">参考单价</label>
                <div class="layui-input-inline">
                    <input type="text" name="price" lay-verify="price" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">平均寿命</label>
                <div class="layui-input-inline">
                    <input type="text" name="avgLife" lay-verify="duration" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">描述</label>
                <div class="layui-input-inline">
                    <input type="text" name="description" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">

            <div class="layui-inline">
                <label class="layui-form-label">备件等级</label>
                <div class="layui-input-inline">
                    <select name="level" lay-verify="required" lay-filter="partId">
                        <option value=""></option>
                        <option value="1">关键备件</option>
                        <option value="2">普通备件</option>
                    </select>
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">配件类型</label>
                <div class="layui-input-inline">
                    <select name="type" lay-verify="required" lay-filter="model" lay-search>
                        <option value=""></option>
                    </select>
                </div>
                <div class="layui-form-mid layui-word-aux">必选</div>
            </div>
        </div>

        <div class="layui-form-item">

            <div class="layui-inline">
                <label class="layui-form-label">最低库存量</label>
                <div class="layui-input-inline">
                    <input type="text" name="minReserve" lay-verify="duration" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">最高库存数</label>
                <div class="layui-input-inline">
                    <input type="text" name="maxReserve" lay-verify="duration" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item" style="width: 300px;" pane>
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <input type="checkbox" checked="" name="status" lay-skin="switch" value="1" lay-filter="switchTest"
                       lay-text="启用|禁用">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-inline">
                <button class="layui-btn" lay-submit="" lay-filter="submit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>

    </form>

</div>

<script src="../static/plugins/layui/layui.js"></script>
<script src="../static/js/jquery-3.2.1.min.js"></script>
<script src="../static/js/jquery.base64.js"></script>
<script src="../static/js/device.js"></script>

<script th:inline="none">
    layui.use(['form', 'laydate', 'util'], function () {
        var form = layui.form;
        var util = layui.util;
        var laydate = layui.laydate;

        var tableName = 'component';
        var id = $('#id').val();

        var date = new Date();

        //开始时间渲染
        laydate.render({
            elem: '#startTime'
            , type: 'datetime'
            // ,max:JJZ.getNowFormatDate()
            , format: 'yyyy-MM-dd'
        });

        if (id) {
            //表示是修改页面
            JJZ.named('name').attr('readonly');
            var param = 'current=1&pageSize=2&searchCol=id&searchValue=' + id;
            JJZ.requestTableData(tableName, param, function (data) {
                var result = data.records[0];
                JJZ.named('name').val(result.name);
                JJZ.named('description').val(result.description);

                JJZ.named('startTime').val(util.toDateString(result.startTime, 'yyyy-MM-dd'));

                JJZ.named('number').val(result.number);
                JJZ.named('avgLife').val(result.avgLife);

                JJZ.named('unit').val(result.unit);
                JJZ.named('price').val(result.price);
                JJZ.named('minReserve').val(result.minReserve);
                JJZ.named('maxReserve').val(result.maxReserve);

                JJZ.named('level').find('option').each(function (index, elem) {
                    $(elem).val() == result.level ? $(elem).attr("selected", "selected") : '';
                });

                JJZ.initSelect(JJZ.named('type'), '/componentType/dataGrid', function (noError) {
                    if (noError) {
                        JJZ.named('type').find('option').each(function (index, elem) {
                            $(elem).val() == result.type ? $(elem).attr("selected", "selected") : '';
                        });
                        form.render(); //更新表单
                    }
                });

                result.status == 1 ? '' : JJZ.named('status').removeAttr("checked");
            });
        } else {
            //表示是新增页面

            //设备类型下拉框
            JJZ.initSelect(JJZ.named('type'), '/componentType/dataGrid', function (noError) {
                form.render(); //更新表单
            });
        }

        form.verify({
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            duration: [
                /^[1-9]\d*|0$/
                , '请输入非负整数(正整数+0)！'
            ],
            price:[
                /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/
                ,'请输入正确的价格！'
            ]
        });

        form.on('submit(submit)', function (data) {

            data.field.status = data.field.status == 1 ? 1 : 0;
            if (id) {
                //编辑
                JJZ.editData(tableName, data.field, function (data) {
                    window.location.href = JJZ.baseUrl + '/' + tableName + '/componentDataGrid';
                })
            } else {
                //新增
                JJZ.addData(tableName, data.field, function (data) {
                    window.location.href = JJZ.baseUrl + '/' + tableName + '/componentDataGrid';
                })
            }
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

    });
</script>
</body>
</html>